<template>
  <md-nav-bar title="" :bgInfo="{ url: data.cover,showLogo:false }" />
  <view class="news-section">
    <view class="news-title">{{data.news.title}}</view>
    <view class="news-time">{{data.news.createTime}}</view>
    <view class="square-container">
      <view class="news-content" v-html="data.news.content" />
    </view>
  </view>

</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";
import api from "@/api";
import {onLoad} from "@dcloudio/uni-app";

const data = ref({
  cover: 'https://cdn.xmxiaomai.com/isong_static/evaluation/indexTopBg.png',
  id: null,
  news: {}
})

onLoad(async (options: any) => {
  data.value.id = options.id;
  const res = await api.News.detail({ id: data.value.id });
  if (res?.data) {
    data.value.news = res.data;
  } else {
    uni.showModal({
      title: '提示',
      content: '内容不存在',
      showCancel: false,
    });
  }
});



</script>
<style scoped lang="scss">
.news-section {
  position: relative;
  z-index: 99;
  margin-top: -240rpx;

  .news-title {
    padding: 32rpx;
    color: #fff;
  }

  .news-time {
    padding: 0 32rpx 32rpx;
    font-size: 24rpx;
    color: #33ab63;
  }

  .square-container {
    min-height: 100vh;
    padding: 32rpx;
    padding-bottom: 120rpx;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
    position: relative;
    z-index: 999;
    background: linear-gradient(180deg, #dff2ee 0%, #f3f6f5 100%);


  }
}

img {
  max-width: 100%;
  height: auto;
}
</style>